<template>
  <el-scrollbar style="height: 100%" >
    <div class="ns-tree-com tree-com" >
      <el-dialog title="文件夹重命名" :visible.sync="dialogFormVisible" center :close-on-click-modal=false	>
        <el-form :model="form">
          <el-form-item label="原名称" label-width="60px">
            <el-input size="mini" class="mye_input" v-model="form.oldName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新名称" label-width="60px">
            <el-input size="mini" class="mye_input" v-model="form.newName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini"  type="danger"    @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini"  type="primary"   @click="[dialogFormVisible = false,update()]">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新建文件夹"   :visible.sync="dialogForm2Visible"  center :close-on-click-modal=false	>
        <el-form :model="form">
          <el-form-item label="文件夹名称" label-width="90px">
            <el-input size="mini" class="mye_input" v-model="form.newRootName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini"  type="danger"    @click="dialogForm2Visible = false">取 消</el-button>
          <el-button size="mini"  type="primary"   @click="updateNewRootName">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="新建文件夹"   :visible.sync="dialogForm3Visible"  center  :close-on-click-modal=false	>
        <el-form :model="form">
          <el-form-item label="文件夹名称" label-width="90px">
            <el-input size="mini" class="mye_input" v-model="form.newChildNode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini"  type="danger"    @click="dialogForm3Visible = false">取 消</el-button>
          <el-button size="mini"  type="primary"   @click="updateChildNode">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="dialogForm4Visible"   center :close-on-click-modal=false>
        <span>确认是否删除</span> <span class="catalogName">{{  catalog  }}</span> <span>目录以及该目录下的子目录</span>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini"  type="danger"    @click="dialogForm4Visible = false">取 消</el-button>
          <el-button size="mini"  type="primary"   @click="deleteNodeFinal">确 定</el-button>
        </div>
      </el-dialog>
      <el-input class="filterinpput"
                placeholder="输入关键字进行目录筛选"
                v-model="filterText"
                size="medium"
      >
      </el-input>

      <el-button @click="addRoot" class="addRootDir"  size="mini" type="danger"><i class="el-icon-circle-plus el-icon--left"></i>添加根目录</el-button>
      <!--        <el-button @click="updateDir" class="updateButton"  size="mini" type="success"><i class="el-icon-refresh el-icon&#45;&#45;left"></i>更新目录</el-button>-->
      <el-tree
        :indent="0"
        :data="datas"
        node-key="id"
        v-loading="loading"
        element-loading-text="目录加载中"
        :expand-on-click-node="false"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        ref="tree">
<!--        @node-click="handleNodeClick"-->
        <div class="custom-node" slot-scope="{node, data}">
          <div class="node-left">
            <el-input v-if="data.edit" size="mini" v-model="curText"></el-input>
            <span  v-else   style="margin-left: 7px;">{{data.parent.catalogName}}</span>
          </div>

          <div class="node-right">
            <template v-if="data.edit">
              <!--                        <el-button type="text" @click="cancel(node, data)">取消</el-button>-->
              <!--                        <el-button type="text" @click="sure(node, data)">确定</el-button>-->
            </template>
            <template v-else>
              <el-button type="text" icon="el-icon-edit"    size="middle"    @click.stop="editNode(node, data)" ></el-button>
              <el-button type="text" icon="el-icon-plus"    size="middle"    @click.stop="addChild(node, data)"></el-button>
              <el-button type="text" icon="el-icon-delete"  size="middle"    @click.stop="deleteNode(node, data)"></el-button>
            </template>
          </div>
        </div>
      </el-tree>

    </div>
  </el-scrollbar>
</template>

<script>
  import {createNamespacedHelpers} from 'vuex'
  const {mapState,mapGetters} = createNamespacedHelpers('dirmanage')
  export default {
    name: 'DirManagementTwo',
    mounted() {
      this.$store.dispatch('dirmanage/getCatlogData')
      this.$store.dispatch('dirmanage/getCatlog')
      var catalogIdDataList = [1,2,3,4]
      // if (this.link === '/theVector'){
        this.$store.commit("dirmanage/resetVectorBreadCrumbs",['生态保护红线'])
        this.$store.dispatch('dirmanage/getAttributeInfo',{catalogIds:catalogIdDataList,achievementsTypeId:'1'})
      // }
      // else if (this.link ==='/theText'){
      //   this.$store.commit("dirmanage/resetTextBreadCrumbs",["生态保护红线"])
      //   this.$store.dispatch('dirmanage/getAttributeInfo',{catalogIds:catalogIdDataList,achievementsTypeId:'2'})
      // }
    },
    computed:{
      ...mapGetters(['datas']),
      ...mapState(['loading']),
      ...mapGetters(['catlogRootId']),
      ...mapGetters(['documentIdLists']),
      ...mapGetters(['link']),
      ...mapGetters(['catalogLists']),
    },
    data () {
      return {
        catalog:"",
        node:"",
        nodedata:"",
        childNode:"",
        childData:"",
        filterText: '',
        curNode: {},
        curText: '',
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogForm2Visible: false,
        dialogForm3Visible: false,
        dialogForm4Visible: false,
        deleteNodes:[],
        deleteDatas:[],
        form: {
          oldName: '',
          newName: '',
          newRootName:"",
          newChildNode:""
        },
        formLabelWidth: '100px'
      }
    },
    props: {
      data: {
        type: Array,
        require: true
      }
    },
    model: {
      prop: 'data'
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      data (val) {
        this.$emit('input', val)
      },
    },
    methods: {
      // 模糊搜索
      filterNode(value, data) {
        if (!value) return true;
        return data.parent.catalogName.indexOf(value) !== -1;
      },
      // 添加根目录
      addRoot(){
        this.dialogForm2Visible = true
      },
      updateNewRootName(){
        this.dialogForm2Visible = false
        var  newRootData = {}
        var  level = 1
        var  upLevelId = 0
        var  catalogName = this.form.newRootName
        if (catalogName){
          newRootData={
            level:level,
            upLevelId:upLevelId,
            catalogName:catalogName
          }
          this.$store.commit('dirmanage/addDatalist',{'parent':newRootData})
          this.updateRootCatalog()
        }
        else {
          this.$message.error('文件夹名称不能为空!')
        }
      },
      updateRootCatalog(){
        this.$store.dispatch('dirmanage/addRootCatalog')
      },
      // 编辑目录名称
      editNode (node, data) {
        this.dialogFormVisible = true
        this.form.oldName = data.parent.catalogName
        this.node = node
        this.nodedata = data
        this.form.newName = ''
      },
      // 编辑目录名称完成后 进行更新
      update(){
        if (this.form.newName) {
          this.$store.commit('dirmanage/editCatlogName',{data:this.nodedata,newName:this.form.newName})
          this.updateCatalog()
        } else {
          this.$message.error('文件夹名称不能为空！！')
        }
      },
      // 更新数据库
      updateCatalog(){
        this.$store.dispatch('dirmanage/updateCatlog')
      },
      updateDir(){
        console.log(this.datas)
      },
      addChild (node, data) {
        this.dialogForm3Visible = true
        this.childNode = node
        this.childData = data
        this.form.newChildNode = ''
      },
      updateChildNode() {
        this.dialogForm3Visible = false
        console.log(this.childNode,this.childData)
        var level = this.childData.parent.level + 1
        var upLevelId = this.childData.parent.id
        var catalogName = this.form.newChildNode
        if (catalogName){
          var childNode = {
            level:level,
            upLevelId:upLevelId,
            catalogName:catalogName
          }
          this.$store.commit('dirmanage/addChildData',{'parent':childNode})
          this.updateTree()
        }
        else {
          this.$message.error('文件夹名称不能为空!')
        }
      },
      updateTree(){
        this.$store.dispatch('dirmanage/addRootCatalog')
      },
      deleteNode ( node,data) {
        this.dialogForm4Visible = true
        this.deleteNodes = node
        this.deleteDatas = data
        console.log(data)
        this.catalog = data.parent.catalogName
      },
      deleteNodeFinal (){
        var id = this.deleteDatas.parent.id
        this.$store.dispatch('dirmanage/deleteCatlog',id)
        this.dialogForm4Visible = false
      },
      handleNodeClick(data) {

        var doucumentIdList = []
        var catalogIdList = []
        const CurrentCode = data.parent.code
        var codeList = []
        for(var j = 0;j<CurrentCode.length;j++){
            codeList.push(CurrentCode.substr(0,j+1))
        }

        // console.log(this.catalogLists)
         for (var i = 0;i<codeList.length;i++){
             for (var n =0;n<this.catalogLists.length;n++){
                   if (this.catalogLists[n].code === codeList[i]){
                      doucumentIdList.push(this.catalogLists[n].catalogName)
                }
             }
        }
        // function f(allCatalogs,code) {
        //   console.log('code',code)
        //       for(var n=0;n<allCatalogs.length;n++){
        //         if(allCatalogs[i].parent.code===code){
        //           doucumentId.push(allCatalogs[i].parent.catalogName)
        //         }
        //         else{
        //            if(allCatalogs[i].children.length>0){
        //              for (var m=0;m<allCatalogs[i].children.length;m++){
        //                  f(allCatalogs[i].children[m],code)
        //              }
        //         }
        //       }
        //    }
        // }
        // function getCatalogName(allcatalogs,code,codeLength){
        //   console.log(codeLength)
        //   for(var l = 0;l<CurrentcodeLength-1;l++){
        //     for (var i =0;i<allcatalogs.length;i++){
        //       console.log(i)
        //       if (allcatalogs[i].parent.code===code.substr(0,codeLength)){
        //         doucumentId.push(allcatalogs[i].parent.catalogName)
        //
        //       }
        //       getCatalogName(allcatalogs[i].children,code,codeLength++)
        //     }
        //   }
        //   }
        //   if (codeLength<CurrentcodeLength && codeLength>0){
        // }
        // console.log(data.parent.code)
        // function findCatalogName(allCatalog,currentNode){
        //       for (var i=0;i<allCatalog.length;i++){
        //         console.log('i',i)
        //         if(allCatalog[i].parent.id===currentNode.parent.upLevelId) {
        //           doucumentId.push(allCatalog[i].parent.catalogName)
        //           if (allCatalog[i].parent.upLevelId === 0) {
        //             doucumentId.push(currentNode.parent.catalogName)
        //             break
        //           }
        //          else{
        //             findCatalogName(allCatalogs,allCatalog[i])
        //            }
        //         }
        //         else{
        //             if(allCatalog[i].children.length>0){
        //               console.log(allCatalog[i].children)
        //               for(var j=0;j<allCatalog[i].children.length;j++){
        //                   console.log("j",j)
        //                   console.log('还得继续')
        //                   findCatalogName(allCatalog = allCatalog[i].children,currentNode=data)
        //               }
        //             }
        //            //  else{
        //            //    findCatalogName(allCatalog[i],data)
        //            // }
        //       }
        //     }
        // }
        // console.log(doucumentIdList)
        findCatalogID(data)
        function findCatalogID (data) {
          catalogIdList.push(data.parent.id);
          for (var i =0;i<data.children.length;i++) {
             if (data.children[i].children.length > 0 ) {
               catalogIdList.push(data.children[i].parent.id)
               for (var j=0;j<data.children[i].children.length;j++){
                 findCatalogID(data.children[i].children[j]);
               }
            }
             else{
               findCatalogID(data.children[i])
             }
          }
        }
        console.log(catalogIdList)
        if (catalogIdList.indexOf(22)>-1|| catalogIdList.indexOf(23)>-1 || catalogIdList.indexOf(24)>-1){
            console.log('daozhe l ')
            this.$store.commit('dirmanage/changeTable',false)
        }
        else{
          this.$store.commit('dirmanage/changeTable',true)
        }
        // alert(data.data.parent.id)
        // const catalog_id = data.parent.id
        if(this.link === '/theVector'){
          this.$store.commit("dirmanage/resetVectorBreadCrumbs",doucumentIdList)
          this.$store.dispatch('dirmanage/getAttributeInfo',{catalogIds:catalogIdList,achievementsTypeId:'1'})
        }
        else if(this.link==='/theText'){
          this.$store.commit("dirmanage/resetTextBreadCrumbs",doucumentIdList)
          this.$store.dispatch('dirmanage/getAttributeInfo',{catalogIds:catalogIdList,achievementsTypeId:'2'})
        }
      }

    }


  }
</script>
<style scoped lang="scss">
  ::v-deep.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
  .catalogName{
    color: red;
  }
  ::v-deep.el-button+.el-button{
    margin-left: 5px;
  }
  .node-left{
    width: 100px;
  }
  .el-form{

  }
  ::v-deep.el-dialog__header{
    padding: 10px;
  }
  ::v-deep .el-dialog__title{
    font-size: 16px;
  }
  ::v-deep.el-form-item{
    margin-bottom: 10px;
  }
  ::v-deep.mye_input{
    width: 100%;
  }
  ::v-deep .el-dialog{
    position:absolute;
    left:26%;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    width: 300px;
  }
  ::v-deep .el-dialog__body{
    padding: 15px;
  }
  .filterinpput{

  }
  .addRootDir{
    color: #100f0f;
    margin-top: 10px;
  }

  ::v-deep.el-dialog__headerbtn{
    top:15px
  }
  ::v-deep.el-tree-node__content .el-tree-node__expand-icon{
    padding: 0;

  }
  ::v-deep .el-tree-node__content{
    height: 21px;
  }
  ::v-deep .ns-tree-com.tree-com{
    padding:8px;
    $icon-width: 18px;
    $line-color: #969696;
    overflow: hidden;
    @mixin lineTopLeft {

    }
    .el-tree{
      padding-top: 10px;
      padding-left: 20px;
      &>.el-tree-node{
        &:before{border-left: none !important;}
      }
      .el-tree-node{
        position: relative;
        padding: 2px;
        &:last-child:before {
          /*height: 20px;*/
        }
        &:before{
          @include lineTopLeft;
          bottom: 0;
          height: 100%;
          top: -26px;
          width: 1px;
        }
        &:after{
          @include lineTopLeft;

          height: 20px;
          top: 12px;
          width: 24px;
        }
        .el-tree-node__content{
          padding: 3px;

        }
        .el-tree-node__content:hover{
          .node-right{
            display: block;
          }
        }
      }
      .el-tree-node__children{
        padding-left: 12px;
      }
    }
.el-tree-node__expand-icon{
      width: $icon-width;
      height: $icon-width;
      padding: 0;
      &.is-leaf{
        &.el-icon-caret-right{
          background-image: url("../assets/img/dir.png");
        }
      }
      &.expanded{
        transform: rotate(0deg);
        &.el-icon-caret-right{
          background-image: url("../assets/img/expand.png");
        }
      }
      &.el-icon-caret-right{
        &::before{content: '';}
        background-image: url("../assets/img/close2.png");
        background-size: 18px;
      }
    }
    .custom-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      .node-right{
        display: none;
      }
    }
  }
  /*::v-deep .el-table__body-wrapper::-webkit-scrollbar {*/
  /*  width:6px;!* 滚动条的宽高 必须项 *!*/
  /*  height: 5px;*/
  /*}*/

  /*::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {*/
  /*  background-color: #bfcbd9;!* 滚动条的宽 *!*/
  /*  border-radius: 3px;*/
  /*}*/
  ::v-deep .el-input__inner{
    margin-left: 15%;
    width: 70%;
    border-radius: 45px;
  }


</style>
